URLとフォルダ構造
今週は、初心者を対象にホームページの基本を紹介します。テーマは「URLとフォルダ構造」です。作成したホームページは、Webサーバ(isweb)にアップロードして公開しますが、URLとフォルダの関係がよくわかっていないとページが正しく表示されない恐れもあります。ホームページ公開の基本ともいえる内容なので、必ずマスターしてください。

→ index.htmlは必須!
 
iswebに登録すると、「http://(iswebのID).hp.infoseek.co.jp/」などのURLを取得できます。そして、訪問者が上記のURLをブラウザに入力(またはリンクから訪問)すると、貴方のホームページが画面に表示されます。このとき参照されるHTMLファイルが「index.html」です。ここで、もしWebサーバ(isweb)に「index.html」がアップロードされていなかったとすると…、当然、ページは正しく表示されません。つまり、ホームページを作成するときは、必ず「index.html」を作成し、アップロードしなければいけないのです。なおiswebでは、「index.html」の代わりに「index.htm」や「index.shtml」をトップページのHTMLファイルとして使用することも可能です。


→ Webサーバ上のフォルダとURL
 
webサーバでは、フォルダを作成し、ファイルを階層的に管理することも可能です。また、Webサーバ上に作成したフォルダは、そのままURLにも反映されます。たとえば、「image」というフォルダをWebサーバ上に作成し、その中に「photo1.jpg」というファイルを保存(アップロード)した場合、そのURLは「http://(iswebのID).hp.infoseek.co.jp/image/photo1.jpg」となります。つまり、「http://(iswebのID).hp.infoseek.co.jp/」が貴方のサイトを表し、次の「image/」が「image」フォルダを表しているわけです。このように、Webサーバ上に作成したフォルダは、URLでは「/」(スラッシュ)で区切られて表記されます。

なお、フォルダまでをURLに記述した場合(ファイル名を省略した場合)は、自動的に「index.html」が補完され、「http://(サイト名)/(フォルダ)/index.html」となります。トップページが「http://(サイト名)/」だけで表示されるのも、この補完機能のおかげです。

※旧トライポッドからiswebに移行した人は、「http://members.at.infoseek.co.jp/(ユーザ名)/」までがサイト名となります。


→ HTMLファイルの位置とリンク
 
「IMG」タグで画像を表示する場合などは、タグ内で参照先ファイルのURLを指定する必要があります。この指定方法には相対パスを利用することも可能ですが、この場合“HTMLファイルが保存されているフォルダを基準”に、フォルダを含めた形式でファイルを指定する必要があります。

相対パスによるファイル指定方法は、大きく分類すると以下の例のようになります。各例の指定方法を参考に、正しい相対パスを記述するようにしてください。
例1)HTMLと指定ファイルが同じフォルダにある場合
 HTMLファイル:「http://(サイト名)/page.html
 画像ファイル:「http://(サイト名)/image01.jpg
 [指定方法]:image01.jpg
※ファイルの指定は、ファイル名だけでOK


例2)HTMLがあるフォルダのサブフォルダに指定ファイルがある場合
 HTMLファイル:「http://(サイト名)/page.html
 画像ファイル:「http://(サイト名)/photo/image01.jpg
 [指定方法]:photo/image01.jpg
※ファイルの指定は、フォルダ名+ファイル名となる


例3)HTMLがあるフォルダと指定ファイルがあるフォルダが全く異なる場合
 HTMLファイル:「http://(サイト名)/syoukai/page.html
 画像ファイル:「http://(サイト名)/photo/image01.jpg
 [指定方法]:../photo/image01.jpg
※ファイルの指定は、そのフォルダへの経路を含めた形となる。一つ上のフォルダに移動するには「../」と記述する。この例では、「syoukai」→(ルートフォルダ)→「photo」とフォルダを移動し、「image01.jpg」を指定しています。


G|Cg|C@Amazon Yahoo yV

z[y[W yVoC[UNLIMIT1~] COiq COsI